{% extends 'base.html' %}

{% block title %}发布博客{% endblock %}

{% block head %}
    <script src="{% static 'jquery/jquery-3.7.1.min.js' %}"></script>
    <link href="https://unpkg.com/@wangeditor/editor@latest/dist/css/style.css" rel="stylesheet"/>
    <style>
        #editor—wrapper {
            border: 1px solid #ccc;
            z-index: 100; /* 按需定义 */
        }

        #toolbar-container {
            border-bottom: 1px solid #ccc;
        }

        #editor-container {
            height: 500px;
        }
    </style>
{% endblock %}

{% block main %}
    <h1>发布博客</h1>
    <div class="mt-3">
        <form action="" method="post">
        {% csrf_token %}
            <div class="mb-3">
                <label class="form-label">标题</label>
                <input type="text" name="title" class="form-control" required>
            </div>
            <div class="mb-3">
                <label class="form-label">分类</label>
                <select name="category" class="form-select" id="category-select"required>
                    {% for category in categories %}
                        <option value="{{ category.id }}">{{ category.name }}</option>
                    {% endfor %}
                </select>
            </div>
            <div class="mb-3">
                <label class="form-label">内容</label>
                <div id="editor—wrapper">
                    <div id="toolbar-container"><!-- 工具栏 --></div>
                    <div id="editor-container"><!-- 编辑器 --></div>
                </div>
            </div>
            <div class="mb-3 text-end">
                <button type="submit" class="btn btn-primary" id="submit-btn">发布</button>
            </div>
        </form>
    </div>
{% endblock %}

{% block script %}
    <script>
        const {createEditor, createToolbar} = window.wangEditor

        const editorConfig = {
            placeholder: 'Type here...',
            onChange(editor) {
                const html = editor.getHtml()
                console.log('editor content', html)
                // 也可以同步到 <textarea>
            },
        }

        const editor = createEditor({
            selector: '#editor-container',
            html: '<p><br></p>',
            config: editorConfig,
            mode: 'default', // or 'simple'
        })

        const toolbarConfig = {}

        const toolbar = createToolbar({
            editor,
            selector: '#toolbar-container',
            config: toolbarConfig,
            mode: 'default', // or 'simple'
        })
        $("#submit-btn").click(function (event) {
            //阻止按钮的默认行为
            event.preventDefault();

            let title = $("input[name='title']").val();
            let category = $("#category-select").val();
            let content = editor.getHtml();
             let csrfmiddlewaretoken = $("input[name='csrfmiddlewaretoken']").val();
            $.ajax('/blog/pub',{
                method:'POST',
                data:{title,category,content,csrfmiddlewaretoken},
                success:function (result){
                    if (result['code'] == 200){
                        //获取博客id
                        let blog_id = result['data']['blog_id']
                        //跳转到博客详情页面
                        window.location = '/blog/detail/'+blog_id
                    }else {
                        alert(result['message']);
                    }
                }
            })
        });
    </script>
{% endblock %}


